
import React from 'react';
import { Link, IndexLink } from 'react-router'

import Header from "./Header"
import SidebarSwitcher from "./SidebarSwitcher"
import _ from 'lodash'
import { connect }  from 'react-redux';
import * as WorkAction from '../actions/WorkAction'
import * as SuggestionAction from '../actions/SuggestionAction'

class Sidebar extends React.Component {

  constructor(props) {
    super(props)
    this.loadTime = 60000
    this.startLoadSuggestion = false
    this.startLoadWork = false
  }

  componentDidMount() {

  }

  componentDidUpdate() {

  }

  loadSuggestionCount() {
    var self = this
    if (this.props.initialState.userType == "PROPERTY" && !this.startLoadSuggestion) {
      this.startLoadSuggestion = true
      self.props.dispatch(
        SuggestionAction.queryUnreplyCountAsync({})
      )
      setInterval(function() {
        self.props.dispatch(
          SuggestionAction.queryUnreplyCountAsync({})
        )
      }, self.loadTime)
    }
  }

  loadWorkCount() {
    var self = this
    if (this.props.initialState.userType == "PROPERTY" && !this.startLoadWork) {
      this.startLoadWork = true
      self.props.dispatch(
        WorkAction.loadApplyingWorkOrderAsync({})
      )
      setInterval(function() {
        self.props.dispatch(
          WorkAction.loadApplyingWorkOrderAsync({})
        )
      }, self.loadTime)
    }
  }

  renderPropertyMenu(suggestionCount, workOrderCount) {

      var content = [];
      var sys_role_user = this.props.initialState.sysuser.sys_role_user;
      if (sys_role_user && sys_role_user.length > 0) {
        for (var i = 0; i < sys_role_user.length; i++) {
          var role = sys_role_user[i].role;
          var role_menus = role.sys_role_menu;
          if (role_menus && role_menus.length > 0) {
            for (var j = 0; j < role_menus.length; j++) {
              var role_menu = role_menus[j];
              var hasOne = _.find(content, function(o) {
                return o.link == role_menu.link
              })
              if (!hasOne) {
                content.push(role_menu)
              }
            }
          }
        }
      }
      content = _.sortBy(content, ["id"])
      // _.reverse(content)
      var menus = [];
      // console.log("render")
      for (var i = 0; i < content.length; i++) {
        var menu = content[i];
        // console.log(menu.id)
        if (menu.name == '意见反馈') {
          if (!this.startLoadSuggestion) {
            this.loadSuggestionCount()
          }
          menus.push((
            <li id={menu.id} className="sidebar-item">
              <Link to={menu.link} activeClassName="active">
                <i className={menu.icon}></i>
                <p>{menu.name}</p>
                {suggestionCount>0?<p className="count">{suggestionCount}</p>:false}
              </Link>
            </li>
          ))
        }
        else if (menu.name == '维修管理') {
          if (!this.startLoadWork) {
            this.loadWorkCount()
          }
          menus.push((
            <li id={menu.id} className="sidebar-item">
              <Link to={menu.link} activeClassName="active">
                <i className={menu.icon}></i>
                <p>{menu.name}</p>
                {workOrderCount>0?<p className="count">{workOrderCount}</p>:false}
              </Link>
            </li>
          ))
        }
        else {
          menus.push((
            <li id={menu.id} className="sidebar-item">
              <Link to={menu.link} activeClassName="active">
                <i className={menu.icon}></i>
                <p>{menu.name}</p>

              </Link>
            </li>
          ))
        }
      }
      // console.log("render end")
      return menus;
  }

  render() {
    var workOrderCount = 0,
        suggestionCount = 0
    if (this.props.workOrderCount) {
      workOrderCount = parseInt(this.props.workOrderCount)
    }

    if (this.props.suggestionCount && this.props.suggestionCount.length > 0 && this.props.suggestionCount[0].count) {
      suggestionCount = parseInt(this.props.suggestionCount[0].count)
    }
    if (this.props.initialState.userType == "PROPERTY") {
      return (
        <div className="sidebar" data-background-color="dark" data-active-color="danger" >
          <div className="sidebar-wrapper">
            <div className="header">
              <div className="logo">
                  <a href="/" className="simple-text">
                      嘉里集团
                  </a>
              </div>
            </div>
            <SidebarSwitcher />
            <ul className="nav" >
              {this.renderPropertyMenu(suggestionCount, workOrderCount)}
              
            </ul>
          </div>
        </div>
      )
    }
    else {
      return (
        <div className="sidebar" data-background-color="dark" data-active-color="danger" >
          <div className="sidebar-wrapper">
            <div className="header">
              <div className="logo">
                  <a href="/" className="simple-text">
                      嘉里集团
                  </a>
              </div>
            </div>
            <SidebarSwitcher />
            <ul className="nav" >

              <li >
                <Link to="/syssetting" activeClassName="active">
                  <i className="ti-settings"></i>
                  <p>系统设置</p>
                </Link>
              </li>
              <li >
                <Link to="/backgroundUsers" activeClassName="active">
                  <i className="ti-panel"></i>
                  <p>账号管理</p>
                </Link>
              </li>
              <li>
                <Link to="/usercenter" activeClassName="active">
                  <i className="ti-user"></i>
                  <p>个人中心</p>
                </Link>
              </li>
            </ul>
          </div>
        </div>
      )
    }
  }
}

const mapStateToProps = (state, ownProps) => {

  return {
          workOrderCount: state.workOrderCount.data ,
          suggestionCount: state.suggestionCount.data
          }
}

export default connect(mapStateToProps)(Sidebar)
